body {
  background: url(clouds.jpg)center fixed;
  background-repeat: no-repeat;    
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
  background-size: cover;
}

/** Styles for all parts of the "header", or top part of the page, containing the 
  * nav icon bar, user and floor score and info, and round info.
  *
  * Note: all margin settings are magical right now, to be able to properly
  * position all elements.
**/

/** Separate the header from the quest bar, create transparency **/
#header {
  background:none;    
  background-image: -moz-linear-gradient(100% 30% 90deg, rgba(99, 184, 223,.50), rgba(255, 255, 255,.67));
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255,.67)), to(rgba(99, 184, 223, .50)));
  border-radius: 8px 8px 8px 8px; /** round edges**/
  margin: 30px auto 115px;
  height: 35px;
  width: 926px;
  margin-bottom: 115px; 
  margin-top: 30px;
  border: 1px solid black;  /** add border **/
}

/** Contains information about the user and floor points **/
#header-info {
  background: rgba(255, 255, 255,.5); 
  border: 1px solid black;
  border-radius: 8px 8px 8px 8px;
  display: block;
  float: left;
  height: 95px;
  overflow: hidden;
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 25px;
  margin-right: 5px;
  margin-left:0px;
  width: 382px;
}

  /** Align all text for floor, user score **/
  #header-floor-overall-rank3, #header-floor-overall-rank4, #header-user-username, #header-floor-name {
    text-align: left;
    opacity: 1.0;
  }

  /** Prevents longer floor names from being "cut" to next line **/ 
  #header-floor-name {
    width: 115px;
  }

  /** Prevents header floor points from being "cut" to next line **/
  #header-floor-points, #header-floor-rank, #header-floor-energy {
    width: 130px;
  }

/** Information on the current round **/
#header-round-info {
  background: rgba(255, 255, 255,.5); 
  position: relative;
  width: 385px;
  border: 1px solid black;
  border-radius: 8px 8px 8px 8px;
  margin-top: 85px;
}

/** Position nav links box, create transparency **/
#header-nav-links {
  background: rgba(255, 255, 255,.5);
  color: #63B8DF;
  border: 1px solid black;
  border-radius: 8px 8px 8px 8px;
  width: 380px;
  margin-top: 0px;
}

  /** Change color of nav links **/
  #header-nav-links ul li h4 {
    color: black;
  }

  /** Change color of selected and hover page links **/
  #header-nav-links a:hover h4, .selected-energy #header-nav-links a.energy h4,
  .selected-activities #header-nav-links a.activities h4, 
  .selected-news #header-nav-links a.news h4,.selected-help #header-nav-links a.help h4, 
  .selected-profile #header-nav-links a.profile h4, 
  .selected-prizes #header-nav-links a.prizes h4 {
    color: #60CEF1;
  }

/** Plcae the logout and feedback links slightly higher than the header **/
#header-logout {
  margin-top: -40px;
}

/** position the large home icon in the header **/
#header-logo {
  margin-left: 0px;
  margin-top: -5px;
}

/** Quest box **/
#header #quest-box {
  background: rgba(255, 255, 255,.5); 
  background-image: -moz-linear-gradient(100% 30% 90deg, rgba(99, 184, 223,.50), rgba(255, 255, 255,.67));
  border-radius: 8px 8px 8px 8px;
  color: black;
  border: 1px solid black;
}

/** Quest box text color **/
#quest-box h4, #quest-list li a {
  color: black;
}

/** Title bar for most widgets **/
.content .tile {
  box-shadow: 3px 3px 6px black;
    -moz-box-shadow: 3px 3px 6px black;
    -webkit-box-shadow: 3px 3px 6px black;
}

/** Home (Large) icons, eliminate white outline **/
#home-energy-icon, #home-activities-icon, #home-news-icon, 
#home-prizes-icon, #home-help-icon, #home-profile-icon {
  border:none;
    border-radius: 100px;
    -moz-border-radius: 100px;
}

/** Container Styles **/
.container, .container-top, .container-bottom {
  background: transparent;
}



/** Styles for all widgets **/
.content-box {
  background-color: white;
  box-shadow: 3px 3px 8px #000;
    -moz-box-shadow: 3px 3px 8px #000;
    -webkit-box-shadow: 3px 3px 8px #000;
  border-radius: 8px 8px 8px 8px;
}

.content-box-title {
  background-image: -moz-linear-gradient(100% 30% 90deg, rgba(99, 184, 223,.50), rgba(255, 255, 255,.67));
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255,.67)), to(rgba(99, 184, 223, .50)));
  border-bottom: 1px solid #000;
  border-radius: 8px 8px 0px 0px;
}

/** Newsfeed, etc. alternating colors **/
.alt-row {
  background: #E3F9F8;
}

/** News widget top backgrounds **/
th {
  background: #CFF2F2;
}

/** Energy title backgrounds **/
fieldset {
  background: #E3F9F8;
}
#energy-status-how-activities-table th, #energy-scoreboard table th  {
  background: #C1EBEC;
}

/** Activities misc. sections **/
#activity-events-content th, #activity-scoreboard-content th {
  background-color: #C1EBEC;
}

#activity-category .get-started, #activity-category .basic-energy, #activity-category .lights-out, 
#activity-category .make-watts, #activity-category .moving-on, #activity-category .opala,
#activity-category .wet-wild, #activity-category .potpourri {
  background-color: #84C4FF;
}

/** Make the game grid larger to better center squares **/
#activity-categories-box {
  width: 580px;
}

/** Activities Table Squares and Legend**/
.activity, .activity-legend {
  background-color: #88F362;
}

.commitment, .commitment-legend {
  background-color: #60CEF1;
}

.event, .event-legend {
  background-color: #D2F564;
}

.survey, .survery-legend {
  background-color: #F2C061;
}

.excursion, .excursion-legend {
  background-color: #EC5B74;
}
    
/** Prizes misc. sections **/
#prizes-list-table-header, #prizes-list-table-awarded-header, #prizes-list-table-criteria-header {
  background: white;
}

/** Profile misc. sections **/
#profile-badges-content h5, #profile-history-content h5, table#profile-form-table {
  background-color: white;
}

#profile-form-table td.profile-section-header {
  background-color: #C1EBEC;
}